<template>
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
    <img src="@/assets/logo.png" style="width: 30px;height: 30px"/>
    <el-link :underline="false" href="/content">
      <div style="width: 200px;padding-left:10px;font-weight: bold;color: dodgerblue">
        货车接单管理
      </div>
    </el-link>
    <div style="flex: 1"></div>
    <div style="width: 100px;">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar size="default" :src="user.header"/>
          <el-icon class="el-icon--right"><arrow-down/></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="UserFilled" :command="user.username">个人中心</el-dropdown-item>
            <el-dropdown-item icon="InfoFilled" command="logout">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import {ref, reactive} from 'vue';
import useStore from '@/store/index'
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";

let {userStore} = useStore()
let user = userStore.user

// 下拉列表
function handleCommand(command) {
  // 点击退出登录
  if (command === "logout") {
    // 弹出提示框，是否确认退出登录
    ElMessageBox.confirm(
        '确认退出登录?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          // 删除用户数据
          userStore.logout()
          // 前往登陆页面
          router.push('/login')
          ElMessage.success('退出登陆成功')
        })
        .catch(() => {
          // 取消退出登录
        })
    return;
  }
  // 前往个人中心
  router.push(`/user/${command}`)
}
</script>

<style scoped>
.header {
  background-color: grey;
}
</style>